<template>
	<div class="mask" v-if="status">
		<div class="dialog-login-box" v-if="dialogStatus === 1">
			<div class="tabs">
				<!-- <div class="item-tab" v-for="(item, index) in tabs" :key="index"
					:class="{ active: currentTab === item.id }" @click="tabChange(item.id)" :is-scroll="false">
					{{ item.name }}
					<div class="actline" v-if="currentTab === item.id"></div>
				</div> -->
				<div class="item-tab active" :is-scroll="false">
					账号登录
					<div class="actline"></div>
				</div>
				<!-- <a class="linkTab" @click="changeRegister()">新用户注册>></a> -->
				<img class="btn-close" @click="cancel()" src="../assets/img/commen/icon-close.png" />
			</div>
			<div class="box" v-if="currentTab === 1">
				<div class="input-item">
					<span class="inputtitle">身份证号：</span><input type="text" placeholder="请输入身份证号" autocomplete="off"
						v-model="passwordForm.certificate_no" class="input" required />
				</div>
				<div class="input-item">
					<span class="inputtitle">登录密码：</span><input type="password" placeholder="请输入登录密码" autocomplete="off" v-model="passwordForm.password"
						class="input" required @keyup.enter="passwordFormValidate" />
				</div>
				<div class="btn-box">
					<button type="submit" class="submit" @click="passwordFormValidate">
						登 录
					</button>
				</div>
				<div class="flex items-center box-footer">
					<div class="flex-1 flex items-start">
						<el-radio size="medium" v-model="is_read" label="1">已阅读<a class="text-blue"
									:href="config.user_private_protocol" target="_blank">《隐私权政策》</a></el-radio>
					</div>
					<div class="flex-shrink-0 text-right">
						<a class="toregister hover:text-blue-600" @click="changeRegister()">注册账号</a>/
						<a class="text-gray-normal  toforget" @click="changeForget()">忘记密码</a>
					</div>
				</div>
				<!-- <div class="others" :class="{
            active:
              config.socialites.qq !== 1 && config.socialites.wechat_scan !== 1,
          }">
					<div class="tit" v-if="
              config.socialites.qq === 1 || config.socialites.wechat_scan === 1
            ">
						第三方快捷登录
					</div>
					<div class="tab-icon">
						<img v-if="config.socialites.qq === 1" @click="changeQQ()" class="btn-others"
							src="../assets/img/commen/icon-qq.png" />
						<img v-if="config.socialites.wechat_scan === 1" @click="changeWeixin()" class="btn-others"
							src="../assets/img/commen/icon-weixin.png" />
					</div>
				</div> -->
			</div>

		</div>
		<div class="registerbox" v-if="dialogStatus === 2">
			<div class="tabs">
				<div class="item-tab active" :is-scroll="false">
					考生注册
					<div class="actline"></div>
				</div>
				<img class="btn-close" @click="cancel()" src="../assets/img/commen/icon-close.png" />
			</div>
			<div class="boxdiv">
				<div class="boxhalf">
					<div class="input-item" style="margin-top:25px;margin-bottom:25px;">
						<el-radio v-model="regform.loginType" :label="0" @change="chgusertype">个人用户</el-radio>
						<el-radio v-model="regform.loginType" :label="1" @change="chgusertype">企业用户</el-radio>
					</div>
					<div class="input-item" v-if="regform.loginType==1">
						<label style="width:80px;flex-shrink: 0;">单位名称：</label>
						<el-select v-model="regform.enterpriseName" filterable placeholder="请选择单位" required class="select">
							<el-option v-for="item in companys" :key="item.name" :label="item.nick" :value="item.name">
							</el-option>
						</el-select>
					</div>
					<div class="input-item">
						<label style="width:80px;flex-shrink: 0;">身份证号：</label><input type="text" placeholder="请输入身份证号作为用户名"
							autocomplete="off" v-model="regform.userName" class="input" required />
					</div>
					<div style="width:100%;display:flex;justify-content:space-between;align-items:center;">
						<div class="input-item" style="width:48%;float:left;">
							<label style="width:80px;flex-shrink: 0;">姓 名：</label><input type="text" placeholder="请输入姓名"
								autocomplete="off" v-model="regform.nickName" class="input" required />
						</div>
						<div class="input-item" style="width:36%;float:left;margin-left:4%;">
							<label style="width:80px;flex-shrink: 0;">性 别：</label>
							<el-radio v-model="regform.sex" label="0">男</el-radio>
							<el-radio v-model="regform.sex" label="1">女</el-radio>
						</div>
					</div>
					
					<div class="input-item">
						<label style="width:80px;flex-shrink: 0;">邮 箱：</label><input type="text" placeholder="请输入邮箱"
							autocomplete="off" v-model="regform.email" class="input" required />
					</div>
					<div class="input-item">
						<label style="width:80px;flex-shrink: 0;">验证码：</label>
						<input type="text" placeholder="请输入邮箱验证码" autocomplete="off" v-model="regform.emailCode"
							class="input-short" required />
						<div class="buttons">
							<span class="send-sms-button" @click="sendEmailSms">
								<template v-if="sms.loading"> {{ sms.current }}s </template>
								<template v-else>获取邮箱验证码</template>
							</span>
						</div>
					</div>
					<div class="input-item">
						<label style="width:80px;flex-shrink: 0;">密 码：</label><input type="password" placeholder="设置6-20位登录密码"
							autocomplete="off" v-model="regform.password" class="input" required />
					</div>
					<div class="input-item">
						<label style="width:80px;flex-shrink: 0;">确认密码：</label><input type="password" placeholder="请再次输入登录密码"
							autocomplete="off" v-model="regform.confirm_pwd" class="input" required />
					</div>
				</div>
				<div class="boxhalf">
					<div class="regimg"></div>
					<div class="btn-box">
						<button type="submit" class="submit" @click="registerFormValidate">
							注册
						</button>
					</div>
					<div class="flex items-center box-footer">
						<span class="footer1">已有账号？</span><a class="footer2" @click="changeLogin()">直接登录>></a>
					</div>
				</div>
			</div>
			
		</div>
		<div class="dialog-login-box" style="width:650px;" v-if="dialogStatus === 20">
			<div class="tabs" style="overflow:unset;">
				<div class="item-tab active">考生注册</div>
				<a class="linkTab" @click="changeLogin()">已有账号，立即登录>></a>
				<img class="btn-close" @click="cancel()" src="../assets/img/commen/icon-close.png" />
			</div>
			<div class="box">
				<div class="input-item">
					<el-radio v-model="regform.loginType" :label="0" @change="chgusertype">个人用户</el-radio>
					<el-radio v-model="regform.loginType" :label="1" @change="chgusertype">企业用户</el-radio>
				</div>
				<div class="input-item" v-if="regform.loginType==1">
					<label style="width:80px;flex-shrink: 0;">单位名称：</label>
					<el-select v-model="regform.enterpriseName" filterable placeholder="请选择单位" required class="select">
						<el-option v-for="item in companys" :key="item.name" :label="item.nick" :value="item.name">
						</el-option>
					</el-select>
				</div>
				<div class="input-item">
					<label style="width:80px;flex-shrink: 0;">身份证号：</label><input type="text" placeholder="请输入身份证号作为用户名"
						autocomplete="off" v-model="regform.userName" class="input" required />
				</div>
				<div style="width:100%;display:flex;justify-content:space-between;align-items:center;">
					<div class="input-item" style="width:48%;float:left;">
						<label style="width:80px;flex-shrink: 0;">姓 名：</label><input type="text" placeholder="请输入姓名"
							autocomplete="off" v-model="regform.nickName" class="input" required />
					</div>
					<div class="input-item" style="width:36%;float:left;margin-left:4%;">
						<label style="width:80px;flex-shrink: 0;">性 别：</label>
						<el-radio v-model="regform.sex" label="0">男</el-radio>
						<el-radio v-model="regform.sex" label="1">女</el-radio>
					</div>
				</div>

				<div class="input-item">
					<label style="width:80px;flex-shrink: 0;">邮 箱：</label><input type="text" placeholder="请输入邮箱"
						autocomplete="off" v-model="regform.email" class="input" required />
				</div>
				<div class="input-item">
					<label style="width:80px;flex-shrink: 0;">验证码：</label>
					<input type="text" placeholder="请输入邮箱验证码" autocomplete="off" v-model="regform.emailCode"
						class="input-short" required />
					<div class="buttons">
						<span class="send-sms-button" @click="sendEmailSms">
							<template v-if="sms.loading"> {{ sms.current }}s </template>
							<template v-else>获取邮箱验证码</template>
						</span>
					</div>
				</div>
				<!-- <div class="input-item">
					<label style="width:80px;flex-shrink: 0;">单 位：</label><input type="text" placeholder="请输入单位名称" autocomplete="off" v-model="regform.company"
						class="input" required />
				</div> -->
				<div class="input-item">
					<label style="width:80px;flex-shrink: 0;">密 码：</label><input type="text" placeholder="设置6-20位登录密码"
						autocomplete="off" v-model="regform.password" class="input" required />
				</div>
				<div class="input-item">
					<label style="width:80px;flex-shrink: 0;">确认密码：</label><input type="text" placeholder="请再次输入登录密码"
						autocomplete="off" v-model="regform.confirm_pwd" class="input" required />
				</div>





				<div class="mb-50 flex items-center">
					<div class="flex-1 flex items-start">
						<div class="flex items-center h-5">
							<input id="remember" type="checkbox" v-model="messageForm.agree_protocol"
								class="focus:ring-indigo-500 h-20 w-20 text-indigo-600 border-gray-300 rounded" />
						</div>
						<div class="ml-10 text-sm">
							<label for="remember" class="text-gray-normal">同意<a class="text-blue"
									:href="config.user_protocol" target="_blank">《用户协议》</a>和<a class="text-blue"
									:href="config.user_private_protocol" target="_blank">《隐私政策》</a></label>
						</div>
					</div>
				</div>
				<div class="btn-box" style="margin-bottom: 0px !important">
					<button type="submit" class="submit" @click="registerFormValidate">
						立即注册
					</button>
				</div>
			</div>
		</div>
		<div class="dialog-login-box" v-if="dialogStatus === 3">
			<div class="tabs">
				<div class="item-tab active">忘记密码</div>
				<a class="linkTab" @click="changeLogin()">返回登录>></a>
				<img class="btn-close" @click="cancel()" src="../assets/img/commen/icon-close.png" />
			</div>
			<div class="box">
				<div class="input-item">
					<input type="text" placeholder="请输入手机号" autocomplete="off" v-model="messageForm.mobile"
						class="input" required />
				</div>
				<div class="input-item">
					<input type="text" placeholder="请输入图形验证码" autocomplete="off" v-model="messageForm.captcha"
						class="input-short" required />
					<div class="captcha">
						<img class="captcha-img" :src="captcha.img" mode="widthFix" @click="getCaptcha" />
					</div>
				</div>
				<div class="input-item">
					<input type="text" placeholder="请输入手机验证码" autocomplete="off" v-model="messageForm.sms"
						class="input-short" required />
					<div class="buttons">
						<span class="send-sms-button" @click="sendSms()">
							<template v-if="sms.loading"> {{ sms.current }}s </template>
							<template v-else>获取验证码</template>
						</span>
					</div>
				</div>
				<div class="input-item">
					<input type="password" placeholder="请设置账号密码" autocomplete="off" v-model="messageForm.password"
						class="input" required />
				</div>
				<div class="btn-box" style="margin-bottom: 0px !important">
					<button type="submit" class="submit" @keyup.enter="editValidate" @click="editValidate">
						重置密码
					</button>
				</div>
			</div>
		</div>
		<div class="dialog-login-box" v-if="dialogStatus === 5">
			<div class="tabs">
				<div class="item-tab active">微信扫码登录</div>
				<a class="linkTab" @click="changeLogin()">其他方式登录>></a>
				<img class="btn-close" @click="cancel()" src="../assets/img/commen/icon-close.png" />
			</div>
			<div class="box">
				<img class="qrode" :src="qrode" />
			</div>
		</div>
		<div style="height: 480px" class="dialog-login-box" v-if="dialogStatus === 6">
			<div class="tabs">
				<div class="item-tab active">验证原手机号</div>
				<img class="btn-close" @click="cancel()" src="../assets/img/commen/icon-close.png" />
			</div>
			<div class="box">
				<div class="box-mobile">
					<span>原手机号码验证：<strong>{{ mobile }}</strong></span>
				</div>
				<div class="input-item">
					<input type="text" placeholder="请输入图形验证码" autocomplete="off" v-model="messageForm.captcha"
						class="input-short" required />
					<div class="captcha">
						<img class="captcha-img" :src="captcha.img" mode="widthFix" @click="getCaptcha" />
					</div>
				</div>
				<div class="input-item">
					<input type="text" placeholder="请输入手机验证码" autocomplete="off" v-model="messageForm.sms"
						class="input-short" required />
					<div class="buttons">
						<span class="send-sms-button" @click="sendSms()">
							<template v-if="sms.loading"> {{ sms.current }}s </template>
							<template v-else>获取验证码</template>
						</span>
					</div>
				</div>
				<div class="btn-box" style="margin-bottom: 0px !important">
					<button type="submit" class="submit" @click="mobileValidate()">
						确定
					</button>
				</div>
			</div>
		</div>
		<div style="height: 480px" class="dialog-login-box" v-if="dialogStatus === 8">
			<div class="tabs">
				<div class="item-tab active">绑定新手机号</div>
				<img class="btn-close" @click="cancel()" src="../assets/img/commen/icon-close.png" />
			</div>
			<div class="box">
				<div class="input-item">
					<input type="text" placeholder="请输入新手机号码" autocomplete="off" v-model="messageForm.mobile"
						class="input" required />
				</div>
				<div class="input-item">
					<input type="text" placeholder="请输入图形验证码" autocomplete="off" v-model="messageForm.captcha"
						class="input-short" required />
					<div class="captcha">
						<img class="captcha-img" :src="captcha.img" mode="widthFix" @click="getCaptcha" />
					</div>
				</div>
				<div class="input-item">
					<input type="text" placeholder="请输入手机验证码" autocomplete="off" v-model="messageForm.sms"
						class="input-short" required />
					<div class="buttons">
						<span class="send-sms-button" @click="sendSms()">
							<template v-if="sms.loading"> {{ sms.current }}s </template>
							<template v-else>获取验证码</template>
						</span>
					</div>
				</div>

				<div class="btn-box" style="margin-bottom: 0px !important">
					<button type="submit" class="submit" @click="changeMobileValidate()">
						立即绑定
					</button>
				</div>
			</div>
		</div>
		<div class="dialog-login-box" v-if="dialogStatus === 7">
			<div class="tabs">
				<div class="item-tab active">绑定微信</div>
				<img class="btn-close" @click="cancel()" src="../assets/img/commen/icon-close.png" />
			</div>
			<div class="box">
				<img class="qrode" :src="qrode" />
			</div>
		</div>
		<div style="height: 440px" class="dialog-login-box" v-if="dialogStatus === 9">
			<div class="tabs">
				<div class="item-tab active">绑定新手机号</div>
				<a v-if="notCancel" class="linkTab2" @click="goLogout">退出登录>></a>
				<img v-if="!notCancel" class="btn-close" @click="cancel()" src="../assets/img/commen/icon-close.png" />
			</div>
			<div class="box">
				<div class="input-item">
					<input type="text" placeholder="请输入新手机号码" autocomplete="off" v-model="messageForm.mobile"
						class="input" required />
				</div>
				<div class="input-item">
					<input type="text" placeholder="请输入图形验证码" autocomplete="off" v-model="messageForm.captcha"
						class="input-short" required />
					<div class="captcha">
						<img class="captcha-img" :src="captcha.img" mode="widthFix" @click="getCaptcha" />
					</div>
				</div>
				<div class="input-item">
					<input type="text" placeholder="请输入手机验证码" autocomplete="off" v-model="messageForm.sms"
						class="input-short" required />
					<div class="buttons">
						<span class="send-sms-button" @click="sendSms()">
							<template v-if="sms.loading"> {{ sms.current }}s </template>
							<template v-else>获取验证码</template>
						</span>
					</div>
				</div>

				<div class="btn-box" style="margin-bottom: 0px !important">
					<button type="submit" class="submit" @click="NewMobileValidate()">
						立即绑定
					</button>
				</div>
			</div>
		</div>
		<div class="dialog-login-box" v-if="dialogStatus === 10">
			<div class="tabs">
				<div class="item-tab active">设置（修改）密码</div>
				<img class="btn-close" @click="cancel()" src="../assets/img/commen/icon-close.png" />
			</div>
			<div class="box">
				<div class="input-item">
					<input type="text" placeholder="请输入绑定手机号" autocomplete="off" v-model="messageForm.mobile"
						class="input" required />
				</div>
				<div class="input-item">
					<input type="text" placeholder="请输入图形验证码" autocomplete="off" v-model="messageForm.captcha"
						class="input-short" required />
					<div class="captcha">
						<img class="captcha-img" :src="captcha.img" mode="widthFix" @click="getCaptcha" />
					</div>
				</div>
				<div class="input-item">
					<input type="text" placeholder="请输入手机验证码" autocomplete="off" v-model="messageForm.sms"
						class="input-short" required />
					<div class="buttons">
						<span class="send-sms-button" @click="sendSms()">
							<template v-if="sms.loading"> {{ sms.current }}s </template>
							<template v-else>获取验证码</template>
						</span>
					</div>
				</div>
				<div class="input-item">
					<input type="password" placeholder="请设置账号密码" autocomplete="off" v-model="messageForm.password"
						class="input" required @keyup.enter="editValidate" />
				</div>
				<div class="btn-box" style="margin-bottom: 0px !important">
					<button type="submit" class="submit" @click="editValidate">
						重置密码
					</button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import Utils from '@/js/utils'
	import { mapState, mapMutations } from 'vuex'
	import urlencode from 'urlencode'
	export default {
		props: ['dialogType', 'status', 'mobile', 'notCancel'],
		data() {
			return {
				is_read:null,
				companys: [],
				timer: null,
				interval: null,
				loading: false,
				code: null,
				newMobile: null,
				dialogStatus: 0,
				qrode: null,
				currentTab: 1,
				captcha: {
					key: null,
					img: null,
				},
				tabs: [{
						name: '密码登录',
						id: 1,
					},
					{
						name: '短信登录',
						id: 2,
					},
				],
				passwordForm: {
					certificate_no: null,
					password: null,
				},
				cardplacehold: '请输入身份证号作为用户名',
				messageForm: {
					cardnumber: null,
					type: '1',
					sms: null,
					image_captcha: null,
					captcha: null,
					password: null,
					agree_protocol: null,
				},
				sms: {
					loading: false,
					max: 60,
					current: 0,
				},
				regform: {
					loginType: 0,
					userType: '01',
					userName: null,
					sex: null,
					nickName: null,
					email: null,
					password: null,
					company: null,
					confirm_pwd: null,
					emailCode: null,
					enterpriseName: null
				},
				emailcode: null,
				scene: null,
			}
		},
		watch: {
			dialogType() {
				this.dialogStatus = this.dialogType
				if (this.dialogStatus !== 0 && this.dialogStatus !== 5) {
					this.getCaptcha()
				}
				if (this.dialogStatus === 7) {
					this.getBindQrode()
				}
			},
			mobile() {
				this.messageForm.mobile = this.mobile
			},
		},
		computed: { ...mapState(['config']), },
		mounted() {

		},
		beforeDestroy() {
			clearInterval(this.timer)
			clearInterval(this.interval)
		},
		methods: {
			...mapMutations([
				'loginHandle',
				'hideLoginDialog',
				'saveDialogMobile',
				'showLoginDialog',
				'bindSuccess',
				'logout',
			]),
			chgusertype() {
				if (this.regform.loginType == 1 && this.companys.length == 0) {
					this.getcompanys()
				}
			},
			getcompanys() {
				this.$api.Auth.Getcompanys().then(res => {
					this.companys = res.data
				})
			},
			changecardtype(e) {
				if (e == '1') {
					// 个人
					this.cardplacehold = '请输入个人身份证号码'
				} else {
					this.cardplacehold = '请输入公司营业执照编号'
				}
			},
			goLogout() {
				if (this.loading) {
					return
				}
				this.loading = true
				this.$api.Auth.Logout()
					.then(res => {
						this.loading = false
						this.logout()
						this.resetDialog()
						this.hideLoginDialog()
					})
					.catch(e => {
						this.loading = false
						this.$message.error('网络错误')
					})
			},
			resetDialog() {
				this.currentTab = 1
				this.messageForm.mobile = null
				this.messageForm.sms = null
				this.messageForm.captcha = null
				this.messageForm.password = null
				this.messageForm.agree_protocol = null
				this.passwordForm.mobile = null
				this.passwordForm.password = null
			},
			getCaptcha() {
				this.$api.Other.Captcha().then(res => {
					this.captcha = res.data
				})
			},
			getQrode() {
				this.$api.Member.WechatLogin().then(res => {
					this.qrode = res.data.image
					this.code = res.data.code
					this.timer = setInterval(this.checkWechatLogin, 1000)
				})
			},
			checkWechatLogin() {
				this.$api.Member.CheckWechatLogin({ code: this.code }).then(res => {
					if (res.data.status === 1 && res.data.token) {
						let token = res.data.token
						this.$utils.saveToken(token)
						this.$api.User.Detail()
							.then(res => {
								this.loginHandle(res.data)
								this.resetDialog()
								this.hideLoginDialog()
								this.redirectHandler()
							})
							.catch(e => {
								this.$message.error(e.msg)
							})
					}
				})
			},
			getBindQrode() {
				this.$api.Member.WechatBind().then(res => {
					this.qrode = res.data.image
					this.code = res.data.code
					this.timer = setInterval(this.checkWechatBind, 3000)
				})
			},
			checkWechatBind() {
				this.$api.Member.Detail().then(res => {
					if (res.data.is_bind_wechat === 1) {
						this.$message.success('绑定成功')
						this.resetDialog()
						this.hideLoginDialog()
						this.bindSuccess()
					}
				})
			},
			sendEmailSms() {
				if (this.sms.loading) {
					// 冷却中
					return
				}

				if (!this.regform.nickName) {
					this.$message.error('请输入用户名')
					return
				}
				if (!this.regform.email) {
					this.$message.error('请输入邮箱')
					return
				}
				this.sms.loading = true
				this.$api.Other.SendEmailSms({
						email: this.regform.email,
						nickName: this.regform.nickName
					})
					.then(() => {
						// 发送成功
						this.$message.success('发送成功')
						// this.sms.loading = false
						this.sms.current = this.sms.max
						this.interval = setInterval(() => {
							if (this.sms.current <= 1) {
								this.sms.loading = false
								clearInterval(this.interval)
							} else {
								this.sms.current--
							}
						}, 1000)
					})
					.catch(e => {
						this.$message.error(e.msg)
						this.sms.loading = false
					})
			},
			sendSms() {
				if (this.sms.loading) {
					// 冷却中
					return
				}
				if (!this.messageForm.mobile) {
					this.$message.error('请输入手机号')
					return
				}
				if (!this.$utils.isPoneAvailable(this.messageForm.mobile)) {
					this.$message.error('请输入正确的手机号')
					return
				}
				if (!this.messageForm.captcha) {
					this.$message.error('请输入图形验证码')
					return
				}
				if (this.dialogStatus === 1) {
					this.scene = 'login'
				}
				if (this.dialogStatus === 2) {
					this.scene = 'register'
				}
				if (this.dialogStatus === 3) {
					this.scene = 'password_reset'
				}
				if (this.dialogStatus === 6) {
					this.scene = 'mobile_bind'
				}
				if (this.dialogStatus === 8) {
					this.scene = 'mobile_bind'
				}
				if (this.dialogStatus === 9) {
					this.scene = 'mobile_bind'
				}
				if (this.dialogStatus === 10) {
					this.scene = 'password_reset'
				}
				this.$api.Other.SendSms({
						mobile: this.messageForm.mobile,
						image_key: this.captcha.key,
						image_captcha: this.messageForm.captcha,
						scene: this.scene,
					})
					.then(() => {
						// 发送成功
						this.$message.success('发送成功')
						this.sms.loading = this
						this.sms.current = this.sms.max
						this.interval = setInterval(() => {
							if (this.sms.current <= 1) {
								this.sms.loading = false
								clearInterval(this.interval)
							} else {
								this.sms.current--
							}
						}, 1000)
					})
					.catch(e => {
						this.getCaptcha()
						this.$message.error(e.msg)
					})
			},
			formValidate() {
				if (this.dialogStatus === 1 && this.currentTab === 1) {
					this.passwordFormValidate()
				}
				if (this.dialogStatus === 1 && this.currentTab === 2) {
					this.messageFormValidate()
				}
				if (this.dialogStatus === 2) {
					this.registerFormValidate()
				}
				if (this.dialogStatus === 3) {
					this.editValidate()
				}
				if (this.dialogStatus === 6) {
					this.mobileValidate()
				}
				if (this.dialogStatus === 8) {
					this.changeMobileValidate()
				}
				if (this.dialogStatus === 9) {
					this.NewMobileValidate()
				}
				if (this.dialogStatus === 10) {
					this.editValidate()
				}
			},
			tabChange(key) {
				this.currentTab = key
			},
			changeRegister() {
				this.dialogStatus = 2
				this.resetDialog()
				this.$emit('changeType', 2)
			},
			changeLogin() {
				clearInterval(this.timer)
				this.dialogStatus = 1
				this.resetDialog()
				this.$emit('changeType', 1)
			},
			changeForget() {
				this.dialogStatus = 3
				this.resetDialog()
				this.$emit('changeType', 3)
			},
			changeQQ() {
				let successRedirectUrl = window.document.location.href
				if (this.$route.name === 'login') {
					let appUrl = this.$utils.getAppUrl()
					if (this.$route.query.redirect) {
						successRedirectUrl = appUrl + this.$route.query.redirect
					} else {
						successRedirectUrl = appUrl
					}
				}
				window.location.href =
					this.config.url +
					'/api/v2/login/socialite/qq?success_redirect=' +
					urlencode(successRedirectUrl) +
					'&failed_redirect=' +
					urlencode(this.$utils.getAppUrl() + '/error')
			},
			changeWeixin() {
				this.dialogStatus = 5
				this.resetDialog()
				this.getQrode()
				this.$emit('changeType', 5)
			},
			cancel() {
				clearInterval(this.timer)
				this.resetDialog()
				this.$emit('hideLoginDialog')
			},
			redirectHandler() {
				if (this.$route.name === 'login') {
					if (this.$route.query.redirect) {
						this.$router.replace({ path: this.$route.query.redirect, })
					} else {
						this.$router.replace({ name: 'index', })
					}
				} else {
					// location.reload()
				}
			},
			async passwordFormValidate() {
				if (this.loading) {
					return
				}
				if(this.is_read!=='1'){
					this.$message.error('请先阅读《隐私性政策》')
					return
				}
				if (!this.passwordForm.certificate_no) {
					this.$message.error('请输入身份证号')
					return
				}
				if (!this.passwordForm.password) {
					this.$message.error('请输入登录密码')
					return
				}
				this.loading = true

				const params = new URLSearchParams();
				// params.append('enterpriseName', 'kaosheng');
				params.append('userName', this.passwordForm.certificate_no);
				params.append('password', this.passwordForm.password);
				params.append('grant_type', 'password');
				params.append('account_type', 'admin');
				params.append('scope', 'server');
				params.append('flag', '1');
				params.append('', '');
				params.append('', '');

				try {
					var resp = await this.$api.Auth.GetToken(params)
				} catch (e) {
					this.loading = false
					this.$message.error(e.msg)
					return
				}


				let ztoken = resp.data.access_token

				this.$utils.saveToken(ztoken)
				this.loading = false

				this.$api.User.Detail()
					.then(res => {
						this.$message.success('登录成功')
						this.loginHandle(res.data)
						this.resetDialog()
						this.hideLoginDialog()
						this.redirectHandler()
					})
					.catch(e => {
						this.$message.error(e.msg)
					})
			},
			messageFormValidate() {
				if (this.loading) {
					return
				}
				if (!this.messageForm.mobile) {
					this.$message.error('请输入手机号')
					return
				}
				if (!this.$utils.isPoneAvailable(this.messageForm.mobile)) {
					this.$message.error('请输入正确的手机号')
					return
				}
				if (!this.messageForm.sms) {
					this.$message.error('请输入手机验证码')
					return
				}
				this.loading = true
				this.$api.Auth.SmsLogin({
						mobile: this.messageForm.mobile,
						mobile_code: this.messageForm.sms,
						msv: this.$utils.getMsv(),
					})
					.then(resp => {
						this.loading = false
						let token = resp.data.token
						this.$utils.saveToken(token)
						this.$api.User.Detail()
							.then(res => {
								this.loginHandle(res.data)
								this.resetDialog()
								this.hideLoginDialog()
								this.redirectHandler()
							})
							.catch(e => {
								this.$message.error(e.msg)
							})
					})
					.catch(e => {
						this.loading = false
						this.$message.error(e.msg)
					})
			},
			registerFormValidate() {
				if (this.loading) {
					return
				}
				if (!this.regform.userName) {
					this.$message.error('请输入身份证号作为用户名')
					return
				}
				if (!this.regform.password) {
					this.$message.error('请设置账号密码')
					return
				}
				if (!this.regform.sex) {
					this.$message.error('请选择性别')
					return
				}
				if (this.regform.password !== this.regform.confirm_pwd) {
					this.$message.error('两次密码输入不一致')
					return
				}
				// if (this.messageForm.agree_protocol !== true) {
				// 	this.$message.error('请同意《用户协议》和《隐私政策》')
				// 	return
				// }
				this.loading = true
				this.$api.Auth.AccountRegister(this.regform)
					.then(resp => {
						this.loading = false
						this.$message.success('注册成功')
						this.resetDialog()
						this.dialogStatus = 1
					})
					.catch(e => {
						this.loading = false
						this.$message.error(e.msg)
					})
			},
			editValidate() {
				if (this.loading) {
					return
				}
				if (!this.messageForm.mobile) {
					this.$message.error('请输入手机号')
					return
				}
				if (!this.$utils.isPoneAvailable(this.messageForm.mobile)) {
					this.$message.error('请输入正确的手机号')
					return
				}
				if (!this.messageForm.sms) {
					this.$message.error('请输入手机验证码')
					return
				}
				if (!this.messageForm.password) {
					this.$message.error('请设置账号密码')
					return
				}
				this.loading = true
				this.$api.Auth.PasswordForget({
						mobile: this.messageForm.mobile,
						mobile_code: this.messageForm.sms,
						password: this.messageForm.password,
					})
					.then(resp => {
						this.loading = false
						this.$message.success('修改完成')
						this.resetDialog()
						this.hideLoginDialog()
					})
					.catch(e => {
						this.loading = false
						this.$message.error(e.msg)
					})
			},
			changeMobileValidate() {
				if (this.loading) {
					return
				}
				if (!this.messageForm.sms) {
					this.$message.error('请输入手机验证码')
					return
				}
				if (!this.messageForm.mobile) {
					this.$message.error('请填写新的绑定手机号码')
					return
				}
				if (!this.$utils.isPoneAvailable(this.messageForm.mobile)) {
					this.$message.error('请输入正确的手机号')
					return
				}
				this.loading = true
				this.$api.Member.MobileChange({
						mobile: this.messageForm.mobile,
						mobile_code: this.messageForm.sms,
						sign: this.messageForm.sign,
					})
					.then(res => {
						this.loading = false
						this.$message.success('绑定成功')
						this.resetDialog()
						this.hideLoginDialog()
						this.bindSuccess()
					})
					.catch(e => {
						this.loading = false
						this.$message.error(e.msg)
					})
			},
			NewMobileValidate() {
				if (this.loading) {
					return
				}
				if (!this.messageForm.sms) {
					this.$message.error('请输入手机验证码')
					return
				}
				if (!this.messageForm.mobile) {
					this.$message.error('请填写新的绑定手机号码')
					return
				}
				if (!this.$utils.isPoneAvailable(this.messageForm.mobile)) {
					this.$message.error('请输入正确的手机号')
					return
				}
				this.loading = true
				this.$api.Member.NewMobile({
						mobile: this.messageForm.mobile,
						mobile_code: this.messageForm.sms,
					})
					.then(res => {
						this.loading = false
						this.$message.success('绑定成功')
						this.resetDialog()
						this.hideLoginDialog()
						this.bindSuccess()
					})
					.catch(e => {
						this.loading = false
						this.$message.error(e.msg)
					})
			},
			mobileValidate() {
				if (this.loading) {
					return
				}
				if (!this.$utils.isPoneAvailable(this.messageForm.mobile)) {
					this.$message.error('请输入正确的手机号')
					return
				}
				if (!this.messageForm.sms) {
					this.$message.error('请输入手机验证码')
					return
				}
				this.loading = true
				this.$api.Member.MobileVerify({
						mobile: this.messageForm.mobile,
						mobile_code: this.messageForm.sms,
					})
					.then(res => {
						this.loading = false
						this.$message.success('验证成功')
						this.saveDialogMobile(null)
						this.resetDialog()
						this.getCaptcha()
						this.sms.loading = false
						this.sms.current = 0
						this.dialogStatus = 8
						this.messageForm.sign = res.data.sign
					})
					.catch(e => {
						this.loading = false
						this.changeMobile = false
						this.$message.error(e.msg)
					})
			},
		},
	}
</script>
<style lang="less" scoped>
	.mask {
		width: 100%;
		height: 100%;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		position: fixed;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 100;
		.registerbox{
			width:1200px;
			height:auto;
			max-height: 820px;
			background: #ffffff;
			border-radius: 8px;
			box-sizing: border-box;
			padding: 30px;
			animation: scaleBig 0.3s;
			.tabs {
				width: 100%;
				height: 44px;
				padding:0 35px;
				display: flex;
				flex-direction: row;
				position: relative;
			
				.linkTab {
					position: absolute;
					top: 5px;
					right: 54px;
					height: 14px;
					font-size: 14px;
					font-weight: 400;
					color: #3ca7fa;
					line-height: 14px;
					cursor: pointer;
			
					&:hover {
						opacity: 0.8;
					}
				}
			
				.linkTab2 {
					position: absolute;
					top: 5px;
					right: 0px;
					height: 14px;
					font-size: 14px;
					font-weight: 400;
					color: #3ca7fa;
					line-height: 14px;
					cursor: pointer;
			
					&:hover {
						opacity: 0.8;
					}
				}
			
				.btn-close {
					width: 24px;
					height: 24px;
					position: absolute;
					right: 6px;
					top: 2px;
					cursor: pointer;
			
					&:hover {
						opacity: 0.8;
						animation: rotate360 1s;
					}
				}
			
				.item-tab {
					width: auto;
					height: 20px;
					font-size: 20px;
					font-weight: 500;
					color: #666666;
					line-height: 20px;
					margin-right: 50px;
					cursor: pointer;
					position: relative;
					letter-spacing:2px;
					&.active {
						color: #134B9F;
						font-weight: bold;
					}
			
					.actline {
						width: 86px;
						height: 4px;
						background: #134B9F;
						position: absolute;
						left: 0px;
						top: 30px;
					}
				}
			}
			.boxdiv{
				display: flex;
				flex-direction: row;
				justify-content:space-around;
				align-items:flex-start;
				.boxhalf {
					width:500px;
					height:auto;
					display: flex;
					flex-direction: column;
					.regimg{
						width:457px;
						height:297px;
						background: url('~@/assets/reg.png');
						background-size: 100% 100%;
					}
					.qrode {
						width: 300px;
						height: 300px;
						margin: 0 auto;
						margin-bottom: 30px;
					}
				
					.box-mobile {
						width: 100%;
						height: 24px;
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-bottom: 50px;
				
						span {
							height: 18px;
							font-size: 18px;
							font-weight: 600;
							color: #333333;
							line-height: 18px;
				
							strong {
								height: 24px;
								font-size: 24px;
								line-height: 24px;
							}
						}
					}
				
					.input-item {
						width: 100%;
						margin-bottom: 18px;
						display: flex;
						flex-direction: row;
						align-items: center;
						.inputtitle{
							width:100px;
						}
						.input {
							width: 100%;
							height: 54px;
							background: #f4fafe;
							border-radius: 4px;
							border: 1px solid #e5e5e5;
							padding-left: 20px;
							outline: none;
						}
				
						.select {
							width: 100%;
							height: 54px;
							background: #f4fafe;
							border-radius: 4px;
							border: 1px solid #e5e5e5;
							outline: none;
				
				
						}
				
						.select /deep/ .el-input .el-input__inner {
							width: 100%;
							height: 54px;
							padding-left: 20px;
							background: #f4fafe;
							// border-radius: 4px;
							border: none;
						}
				
						.input-short {
							width: 310px;
							height: 54px;
							background: #f4fafe;
							border-radius: 4px;
							border: 1px solid #e5e5e5;
							padding-left: 20px;
							margin-right: 20px;
							outline: none;
						}
				
						.captcha {
							width: 110px;
							height: 39px;
							cursor: pointer;
				
							img {
								width: 110px;
								height: 39px;
							}
						}
						.buttons {
							// margin-left: 20px;
				
							.send-sms-button {
								display:inline-block;
								width: 130px;
								height: 18px;
								font-size: 18px;
								font-weight: 400;
								color: #3ca7fa;
								line-height: 18px;
								cursor: pointer;
				
								&:hover {
									opacity: 0.8;
								}
							}
						}
					}
					.box-footer{
						font-size: 18px;
						display:flex;
						flex-direction:row;
						align-items:center;
						justify-content:center;
						.footer1{
							margin-right:10px;
							color:#333;
						}
						.footer2{
							color:#134B9F;
						}
					}
					.btn-box {
						width: 100%;
						margin-bottom: 30px;
				
						.submit {
							width: 90%;
							margin:30px auto 0;
							height: 54px;
							background: #409EFF;
							border-radius: 4px;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 16px;
							font-weight: 400;
							color: #ffffff;
							line-height: 16px;
							outline: none;
				
							&:hover {
								opacity: 0.8;
							}
						}
				
						.logout {
							width: 100%;
							height: 54px;
							background: #fff;
							border-radius: 4px;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 14px;
							font-weight: 400;
							color: #999999;
							line-height: 14px;
							outline: none;
				
							&:hover {
								opacity: 0.8;
							}
						}
					}
				
					.others {
						width: 100%;
						margin-top: 50px;
				
						&.active {
							margin-top: 0px;
						}
				
						.tit {
							width: 100%;
							text-align: center;
							height: 14px;
							font-size: 14px;
							font-weight: 400;
							color: #999999;
							line-height: 14px;
							margin-bottom: 30px;
						}
				
						.tab-icon {
							width: 100%;
							display: flex;
							justify-content: center;
				
							.btn-others {
								margin-right: 64px;
								width: 48px;
								height: 48px;
								cursor: pointer;
				
								&:hover {
									opacity: 0.8;
								}
				
								&:last-child {
									margin-right: 0px;
								}
							}
						}
					}
				}
			}
			
		}
		.dialog-login-box {
			width: 540px;
			max-height: 820px;
			background: #ffffff;
			border-radius: 8px;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			padding: 30px 50px;
			animation: scaleBig 0.3s;

			.tabs {
				width: 100%;
				height: 44px;
				display: flex;
				flex-direction: row;
				position: relative;

				.linkTab {
					position: absolute;
					top: 5px;
					right: 54px;
					height: 14px;
					font-size: 14px;
					font-weight: 400;
					color: #3ca7fa;
					line-height: 14px;
					cursor: pointer;

					&:hover {
						opacity: 0.8;
					}
				}

				.linkTab2 {
					position: absolute;
					top: 5px;
					right: 0px;
					height: 14px;
					font-size: 14px;
					font-weight: 400;
					color: #3ca7fa;
					line-height: 14px;
					cursor: pointer;

					&:hover {
						opacity: 0.8;
					}
				}

				.btn-close {
					width: 24px;
					height: 24px;
					position: absolute;
					right: 6px;
					top: 2px;
					cursor: pointer;

					&:hover {
						opacity: 0.8;
						animation: rotate360 1s;
					}
				}

				.item-tab {
					width: auto;
					height: 20px;
					font-size: 20px;
					font-weight: 500;
					color: #666666;
					line-height: 20px;
					margin-right: 50px;
					cursor: pointer;
					position: relative;
					letter-spacing:2px;
					&.active {
						color: #134B9F;
						font-weight: bold;
					}

					.actline {
						width: 86px;
						height: 4px;
						background: #134B9F;
						position: absolute;
						left: 0px;
						top: 30px;
					}
				}
			}
			
			.box {
				width: 100%;
				margin-top: 30px;
				display: flex;
				flex-direction: column;

				.qrode {
					width: 300px;
					height: 300px;
					margin: 0 auto;
					margin-bottom: 30px;
				}

				.box-mobile {
					width: 100%;
					height: 24px;
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-bottom: 50px;

					span {
						height: 18px;
						font-size: 18px;
						font-weight: 600;
						color: #333333;
						line-height: 18px;

						strong {
							height: 24px;
							font-size: 24px;
							line-height: 24px;
						}
					}
				}

				.input-item {
					width: 100%;
					margin-bottom: 28px;
					display: flex;
					flex-direction: row;
					align-items: center;
					.inputtitle{
						width:100px;
					}
					.input {
						width: 100%;
						height: 54px;
						background: #f4fafe;
						border-radius: 4px;
						border: 1px solid #e5e5e5;
						padding-left: 20px;
						outline: none;
					}

					.select {
						width: 100%;
						height: 54px;
						background: #f4fafe;
						border-radius: 4px;
						border: 1px solid #e5e5e5;
						outline: none;


					}

					.select /deep/ .el-input .el-input__inner {
						width: 100%;
						height: 54px;
						padding-left: 20px;
						background: #f4fafe;
						// border-radius: 4px;
						border: none;
					}

					.input-short {
						width: 310px;
						height: 54px;
						background: #f4fafe;
						border-radius: 4px;
						border: 1px solid #e5e5e5;
						padding-left: 20px;
						margin-right: 20px;
						outline: none;
					}

					.captcha {
						width: 110px;
						height: 39px;
						cursor: pointer;

						img {
							width: 110px;
							height: 39px;
						}
					}

					.buttons {
						margin-left: 20px;

						.send-sms-button {
							width: 90px;
							height: 18px;
							font-size: 18px;
							font-weight: 400;
							color: #3ca7fa;
							line-height: 18px;
							cursor: pointer;

							&:hover {
								opacity: 0.8;
							}
						}
					}
				}
				.box-footer{
					/deep/ .el-radio__label{
						font-size:16px !important;
					}
					font-size: 16px;
					.toregister{
						// color:#333;
						
					}
					.toforget{
						color:#f00;
					}
				}
				.btn-box {
					width: 100%;
					margin-bottom: 30px;

					.submit {
						width: 100%;
						height: 54px;
						background: #409EFF;
						border-radius: 4px;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 16px;
						font-weight: 400;
						color: #ffffff;
						line-height: 16px;
						outline: none;

						&:hover {
							opacity: 0.8;
						}
					}

					.logout {
						width: 100%;
						height: 54px;
						background: #fff;
						border-radius: 4px;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 14px;
						font-weight: 400;
						color: #999999;
						line-height: 14px;
						outline: none;

						&:hover {
							opacity: 0.8;
						}
					}
				}

				.others {
					width: 100%;
					margin-top: 50px;

					&.active {
						margin-top: 0px;
					}

					.tit {
						width: 100%;
						text-align: center;
						height: 14px;
						font-size: 14px;
						font-weight: 400;
						color: #999999;
						line-height: 14px;
						margin-bottom: 30px;
					}

					.tab-icon {
						width: 100%;
						display: flex;
						justify-content: center;

						.btn-others {
							margin-right: 64px;
							width: 48px;
							height: 48px;
							cursor: pointer;

							&:hover {
								opacity: 0.8;
							}

							&:last-child {
								margin-right: 0px;
							}
						}
					}
				}
			}
		}
	}
</style>
